<template>
  <a-spin :spinning="spinning">
    <div class="board">
      <div class="text-center header">住房保障数据看板</div>
      <div class="wrapper">
        <a-row :gutter="[24, 24]" type="flex">
          <a-col :span="6" v-for="total in totalOptions" :key="total.title">
            <div class="border-line p-16 total-card">
              <div class="title fz-18">{{ total.title }}</div>
              <div class="total" v-if="!$isEmpty(Number(boradData[total.key]))">
                <div
                  class="total-item"
                  :class="item === ',' ? 'separator' : ''"
                  v-for="(item, index) in numberFormat(boradData[total.key])"
                  :key="index"
                >
                  <span class="text">{{ item }}</span>
                </div>
                <span class="label">人</span>
              </div>
              <div v-else class="total label" style="color: #606266">暂无数据</div>
            </div>
          </a-col>
          <a-col
            :span="8"
            v-for="item in ['One', 'Two', 'Three', 'Four', 'Five', 'Six']"
            :key="item"
          >
            <div class="border-line">
              <component :is="`chart${item}`" :data="boradData"></component>
            </div>
          </a-col>
        </a-row>
      </div>
    </div>
  </a-spin>
</template>

<script>
import { echartsView } from '@/components'
// import { getDataBoard } from '@/api/dashboard'
import chartOne from './dataBoard/chartOne.vue'
import chartTwo from './dataBoard/chartTwo.vue'
import chartThree from './dataBoard/chartThree.vue'
import chartFour from './dataBoard/chartFour.vue'
import chartFive from './dataBoard/chartFive.vue'
import chartSix from './dataBoard/chartSix.vue'
export default {
  inject: ['handleCollapse'],
  components: {
    echartsView,
    chartOne,
    chartTwo,
    chartThree,
    chartFour,
    chartFive,
    chartSix
  },
  data () {
    return {
      spinning: false,
      boradData: {},
      totalOptions: [
        {
          title: '周',
          key: 'FWSL'
        },
        {
          title: '月',
          key: 'WSHSL'
        },
        {
          title: '年',
          key: 'YDWCLSL'
        },
        {
          title: '共',
          key: 'BYSQRS'
        }
      ]
    }
  },
  activated () {
    this.handleCollapse(true)
    this.fetchData()
  },
  deactivated () {
    this.handleCollapse(false)
  },
  methods: {
    numberFormat (value) {
      if (!value) {
        return '0'
      }
      const intPartFormat = value.toString().replace(/(\d)(?=(?:\d{3})+$)/g, '$1,') // 将整数部分逢三一断
      return intPartFormat.split('')
    },
    fetchData () {
      this.spinning = true
      // getDataBoard({
      //   UserID: this.$store.getters.userid
      // })
      //   .then((res) => {
      //     this.boradData = res
      //   })
      //   .finally(() => {
      //     this.spinning = false
      //   })
    }
  }
}
</script>
<style lang="less" >
  .board {
    height: 100vh;
    position: fixed;
    top: -1px;
    left: 78px;
    right: 0;
    bottom: 0;
    z-index: 10;
    color: #fff;
    background-image: url('../../assets/images/BulletinBoardBg.png');
    background-size: 100% 100%;
    background-position: center center;
    background-repeat: no-repeat;
    font-family: SourceHanSansSC;
    padding: 30px 24px;
    overflow: auto;
    .header {
      font-weight: 700;
      font-size: 36px;
      color: rgba(242, 242, 242, 1);
      font-style: normal;
      letter-spacing: 0px;
      line-height: 19px;
    }
    .wrapper {
      padding-top: 70px;
      .border-line {
        background-image: url('../../assets/images/border-line.png');
        background-size: 100% 100%;
        background-position: center center;
        background-repeat: no-repeat;
      }
      .total-card {
        width: 100%;
        height: 180px;
        position: relative;
        overflow: hidden;
        .title {
          position: absolute;
          left: 16;
          top: 16;
          font-size: 16px;
          font-weight: bold;
        }
        .text,
        .label {
          font-weight: 400;
          font-size: 30px;
          color: rgba(242, 236, 236, 1);
          font-style: normal;
          letter-spacing: 0px;
          line-height: 44px;
        }
        .separator {
          background-color: transparent !important;
          padding: 0 !important;
          font-size: 26px;
        }
        .total {
          height: 100%;
          display: flex;
          justify-content: center;
          align-items: center;
          flex-wrap: wrap;
          margin-top: 20px;
          &-item {
            background-color: #4c5ec8;
            padding: 6px 8px;
            margin-right: 6px;
          }
        }
      }
    }
  }
</style>
